<template>
	<!-- 组件 套餐/单品 -->
	<view style="width: 702rpx;background: #FFFFFF;border-radius: 16rpx;margin:0 24rpx;">
		<view class="h-40"></view>
		<template v-for="(groupV,groupK) in packageGoods" :key="groupK">
			<view class="chxy-row" style="padding:0 24rpx;margin-bottom: 25rpx;" v-if="groupV.itemType != 3">

				<view style="width: 140rpx;height: 120rpx;">
					<image v-if="groupV.attachment" :src="groupV.attachment" style="width: 120rpx;height: 120rpx;"
						mode="aspectFill"></image>
					<image v-else src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png"
						style="width: 120rpx;height: 120rpx;" mode="aspectFill"></image>
				</view>
				<view style="width: 514rpx; ">
					<view style="height: 120rpx;">
						<view class="chxy-row-ac">
							<view
								style="width: 80rpx;height: 36rpx;background: #FFF6E5;border-radius: 4rpx;font-size: 24rpx;color: #FFAA00;line-height: 36rpx;text-align: center;"
								v-if="groupV.itemType==2">套餐</view>
							<view
								style="width: 80rpx;height: 36rpx;background: #E5FFE5;border-radius: 4rpx;font-size: 24rpx;color: #2BD948;line-height: 36rpx;text-align: center"
								v-if="groupV.itemType==1 ">单品</view>
							<view style="width: 10rpx;"></view>
							<view class="over-hidden-el" style="width: 380rpx;height: 36rpx;line-height: 36rpx;font-family: PingFang SC;font-weight: 500;font-size: 28rpx;color: #212121; display: flex;align-items: center;justify-content: space-between;">
								<view class="">{{groupV.goodsName}}
								<image class="cm-cart-panel__fold" :class="groupV.fold === '1' ? 'cm-cart-panel__fold_spe' : ''"
									src="https://oss.jtmckj.com/wmp/kbq/common/i_radio_top.png" v-if="groupV.itemType == 2 "
									@click="onFold(groupK)"></image>
								</view>
								
								<view style="font-size: 24rpx;">￥{{ groupV.salePrice }}</view>
							</view>
							<view style="width: 12rpx;"></view>
							
						</view>
						<view class="over-hidden-el"style="width: 100%;height: 50rpx;font-family: PingFang SC;font-weight: 500;font-size: 24rpx;color: #666666;line-height: 50rpx;display: flex;align-items: center;justify-content: space-between;">
							<view class="">
								规格：{{groupV.uomName}}
							</view>
							
							<view class="" style="color: #666;">
								x{{groupV.orderQty}}
							</view>
						</view>
					<!-- 	<view class="" style="display: flex;justify-content: space-between;">

							
						</view> -->
					</view>
					<!-- 套餐循环 -->
					<view style="padding: 0 24rpx;margin-bottom: 10rpx;" v-if="groupV.fold === '1' " v-for="(v,k) in groupV.itemType3" :key="k">
						<view class="h-24"></view>
						<view style="height: 1rpx;background-color: #E6E6E6;"></view>
						<view class="h-24"></view>
						<view class="chxy-row-bt">
							<view style="font-size: 26rpx;color: #212121;">{{v.goodsName}}</view>
							<view style="font-size: 26rpx;color: #666666;">￥{{ v.salePrice }}</view>
						</view>
						<view class="h-20"></view>
						<view class="chxy-row-bt">
							<view style="font-size: 24rpx;color: #666666;">规格：{{ v.uomName }}</view>
							<view style="font-size: 24rpx;color: #666666;">x{{ v.orderQty }}</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view>
		</view>
		<view style="height: 18rpx;padding: 0 24rpx;" class="chxy-column-ac-end">
	<!-- 		<view style="border-top: 1rpx solid #E6E6E6;height: 25rpx;width: 100%;"></view>
			<view style="color: #666666;">合计：<text style="color:#FF3333 ;">￥{{PriceTotal}}</text></view>
			<view class="h-10"></view>
			<view style="color: #666666;">(可用金币：￥{{useGoldTotal}})</view> -->
		</view>
	</view>
</template>

<script setup>
	import { onLoad, onShow, onReachBottom, onPullDownRefresh, onHide, onPageScroll } from '@dcloudio/uni-app';
	import { ref, computed, watchEffect } from 'vue';

	const props = defineProps({
		packageGoods: {
			type: Array,
			default: []
		},
		useGoldTotal: {
			type: Number
		},
		PriceTotal: {
			type: Number
		}

	});
	const packageGoods = ref([...props.packageGoods]);

	const onFold = (index) => {
		packageGoods.value[index].fold = packageGoods.value[index].fold == '1' ? '0' : '1';
	}

	// 监听 props 变化，确保 packageGoods 数据同步更新
	watchEffect(() => {
		// 创建一个以 indexStr 为键的映射
		const indexMap = {};
		// 将 itemType 为 2 和 3 的数据根据 indexStr 分组
		packageGoods.value.forEach(item => {
			if (item.itemType == 2 || item.itemType == 3) {
				if (!indexMap[item.indexStr]) {
					indexMap[item.indexStr] = { itemType2: null, itemType3: [] };
				}
				if (item.itemType == 2) {
					indexMap[item.indexStr].itemType2 = item;
				} else if (item.itemType == 3) {
					indexMap[item.indexStr].itemType3.push(item);
				}
			}
		});

		// 处理结果
		const result = [];
		packageGoods.value.forEach(item => {
			if (item.itemType == 1 || item.itemType == "1") {
				result.push(item); // itemType 为 1 的数据平级
			}
		});

		Object.keys(indexMap).forEach(key => {
			const { itemType2, itemType3 } = indexMap[key];
			if (itemType2) {
				itemType2.itemType3 = itemType3; // 将 itemType3 数据放到 itemType2 里
				result.push(itemType2); // 将 itemType2 数据添加到结果中
			}
		});
	});
</script>
<style scoped lang="scss">
	.cm-cart-panel__fold {
		width: 32rpx;
		height: 32rpx;
		padding-left: 30rpx;
		padding-right: 0rpx;
	}

	.cm-cart-panel__fold_spe{
		transform: rotate(180deg);
		padding-right: 30rpx;
		padding-left: 0rpx;
	}
</style>